<template>
	<view class="page">
		<navigation defaultButton="back" barColor="#333333" textColor="#333333">发布服务</navigation>
		<view class="page_main">
			<form-picker name="服务政策" v-model="model.zhengce" placeholder="请选择服务政策" :range="payTypes" @change="serveZhengce"></form-picker>
			<form-input type="text" name="订单名称" v-model="model.name" placeholder="请输入订单名称"></form-input>
			<form-picker name="服务类别" v-model="model.serviceType" placeholder="请选择服务类别" rangeKey="name" rangeValue="id" :range="serviceTypeList" @change="getServeType"></form-picker>
			<form-picker name="订单类别" v-model="model.type" placeholder="请选择订单类别" rangeKey="name" rangeValue="id" :range="orderTypeList"></form-picker>
			<view class="form-item">
				<view class="form-item__name">服务时长</view>
				<view class="form-item__value">
					<view class="form-item__value-input">
						<picker class="picker" mode="selector" :range="durationList" @change="durationPickerChange">
							{{model.time || '请选择服务时长'}}&nbsp;<text class="nursing-icon iconyoujiantou right-bar"></text>
						</picker>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item__name" :class="{'disabled_name':model.zhengce == $enums['服务政策']['公益']}">服务费用</view>
				<view class="form-item__value form_flex">
					<input type="number" class="form-item__value-input" v-model="model.money" :disabled="model.zhengce == $enums['服务政策']['公益']" placeholder="请输入服务费用"
					 placeholder-class="form-item__value-input-placeholder" />
					<text class="right-bar">元</text>
				</view>
			</view>
			<form-input type="text" name="服务内容" v-model="model.content" placeholder="请输入服务内容"></form-input>
			<view class="form-item mask_line">
				<view class="form-item__name">服务详情</view>
				<view class="form-item__value">
					<textarea class="form-item__value-input left_input" v-model="model.details" placeholder-class="form-item__value-input-placeholder"
					 placeholder="请描述您的服务详情" />
					</view> 
			</view>
			<view class="cu-form-group photo_panel">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in model.images" :key="index" @tap="ViewImage" :data-url="model.images[index]">
					 <image :src="model.images[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="model.images.length<uploadFileNum">
						<!-- <text class='cuIcon-cameraadd'></text> -->
						<image class="form-item__value-image" src="/static/images/photo_bg.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="photo_hint-text">至少上传一张服务图片</view>
			<button class="page_btn" hover-class="page_btn-hover" @tap="submit">发布服务</button>
			
		</view>
	</view>
</template>

<script>
	import * as common from '@/api/common.js';
	import { HTTP_SERVER_URL } from '@/config';
	import * as serveApi from '@/api/orgApi/serve.js';
	import * as userServeApi from '@/api/userApi/serve.js';
	export default {
		data() {
			return {
				HTTP_SERVER_URL,
				$enums: this.$enums,
				model: {
					name: '',
					money: 0,
					zhengce: 0,
					orderType: '',
					serviceType: 1,
					type: '',
					time: '',
					content: '',
					images: [],
					details: '',
				},
				serviceTypeList:[
					{
						name: '养老服务',
						id: 1
					},
					{
						name: '医养护理',
						id: 2
					}
				],
				payTypes: [
					{ label: "公益", value: 0 },
					{ label: "常规", value: 1 }
				],
				orderTypeList: [],
				durationList: ['30分钟', '1小时', '1.5小时', '2小时', '3小时', '3小时以上'],
				uploadFileNum:5
			}; 
		},
		created() {
			this.getServeType();
		},
		methods: {
			submit(){
				serveApi.submitServe(this.model).then(res => {
					if (res.code == 0) {
						uni.switchTab({
							url: '/pages/mine/mine'
						});
					} 
				}).catch((e)=>{
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
			},
			getServeType(type){
				if (!type) {
					this.$set(this.model,"type",null);
				}
				this.orderTypeList = [];
				common.getServeType({type: this.model.serviceType}).then(res => {
					if (res.code === 0) {
						this.orderTypeList = res.data;
					}
				}).catch((e)=>{
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
			},
			getDetail(id){
				if(id) {
					userServeApi
						.queryDetails({ id: id })
						.then(res => {
							if (res.code === 0) {
								this.model = res.data;
								this.getServeType('edit'); 
							}
						})
						.catch(e => {
							uni.showToast({
								title: e.msg,
								icon: 'none',
								duration: 1000
							});
						});
				}
			},
			 //选择图片
			ChooseImage() {
				let uploadFileLength = parseInt(this.uploadFileNum - this.model.images.length);
				uni.chooseImage({
					count: uploadFileLength, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						for (var i = 0; i<res.tempFilePaths.length; i++) {
							let url = '/institute/service-image/addImage';
							// #ifdef APP-PLUS || MP-WEIXIN
							url = HTTP_SERVER_URL + url;
							// #endif
							uni.uploadFile({
								url,
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: uploadRes => {
									this.model.images.push(JSON.parse(uploadRes.data).data);
								},
								fail: uploadErr => {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					} 
				});
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.model.images,
					current: e.currentTarget.dataset.url
				});
			},
			//删除图片
			DelImg(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.model.images.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			photograph(type) {
				uni.chooseImage({
					sourceType: ['camera'],
					sizeType: ['compressed', 'original'],
					count: 1,
					success: res => {
						for (var i = 0; i<res.tempFilePaths.length; i++) {
							let url = '/institute/service-image/addImage';
							// #ifdef APP-PLUS || MP-WEIXIN
							url = HTTP_SERVER_URL + url;
							// #endif
							uni.uploadFile({
								url,
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: uploadRes => {
									this.model.images.push(JSON.parse(uploadRes.data).data);
								},
								fail: uploadErr => {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					}
				});
			},
			serveZhengce(value) {
				if(value == 0) {
					this.model.money = 0;
				}
			},
			durationPickerChange(e) {
				console.log('e',e);
				this.model.time = this.durationList[e.detail.value];
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
				this.getDetail(options.id);
			}
		}
	}
</script>

<style lang="stylus">
	.page_main {
		padding 0rpx 30rpx;
		box-sizing border-box;
	}

	.form-item {
		// min-height 80rpx;
		// margin-bottom 20rpx;
		// position relative;
		&::before {
			content '';
			position absolute;
			left 0rpx;
			height 2rpx;
			right 0rpx;
			bottom 0rpx;
			background-color rgba(244, 244, 244, 1);
			
		}
	}
	
	.photo_panel .form-item__value-image {
		width 165rpx;
		height 165rpx;
	}
	.mask_line {
		flex-direction column;
		position relative;
		margin-top 50rpx;
		padding-top 30rpx;
		box-sizing border-box;
		// &::after {
		// 	content none;
		// }
		&::before {
			content '';
			position absolute;
			left -30rpx;
			right -30rpx;
			top 0rpx;
			height 12rpx;
			background-color rgba(246, 246, 246, 1);
		}
		
		.form-item__name {
			width 100%;
			text-align left;
		}
		.form-item__value {
			width 100%;
			.form-item__value-input {
				width 100%;
				height 100rpx;
				margin 0rpx;
				padding 20rpx 0rpx; 
				text-align left;
				box-sizing border-box;
			}
			.form-item__value-input-placeholder {
				text-align left;
			}
		}
	}

	.right-bar {
		margin-left 15rpx;
		font-size 20rpx;
	}

	.form_flex {
		display flex;
		align-items center;
	}
	.cu-form-group {
		padding 0rpx;
	}
	.photo_hint-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #BCBECD;
	}
	.page_btn {
		margin-top 70rpx;
	}
</style>
